@@include('header.htm', {
  "title": "Table - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "<link href='assets/plugins/daterangepicker/daterangepicker.css' rel='stylesheet'>",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "tables",
	"sub_parent": "tables",
	"active": "basic-tables"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Tables</h1>

	@@include('breadcrumb.htm', {
		"parent": "tables",
		"sub_parent": "tables",
		"active": "basic-tables"
	})
</div>

<div class="row">
	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Basic Table</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap <a href="https://getbootstrap.com/docs/4.6/content/tables/" target="_blank"> more details.</a></p>
						
				<table class="table">
					<thead>
						<tr>
							<th scope="col">#</th>
							<th scope="col">First</th>
							<th scope="col">Last</th>
							<th scope="col">Handle</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td scope="row">1</td>
							<td>Lucia</td>
							<td>Christ</td>
							<td>@Lucia</td>
						</tr>

						<tr>
							<td scope="row">2</td>
							<td>Catrin</td>
							<td>Seidl</td>
							<td>@catrin</td>
						</tr>

						<tr>
							<td scope="row">3</td>
							<td>Lilli</td>
							<td>Kirsh</td>
							<td>@lilli</td>
						</tr>

						<tr>
							<td scope="row">4</td>
							<td>Else</td>
							<td>Voigt</td>
							<td>@voigt</td>
						</tr>

						<tr>
							<td scope="row">5</td>
							<td>Ursel</td>
							<td>Harms</td>
							<td>@ursel</td>
						</tr>

						<tr>
							<td scope="row">6</td>
							<td>Anke</td>
							<td>Sauter</td>
							<td>@Anke</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Striped Table</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Use <code>.table-striped</code> to add zebra-striping to any table row within the &lt;tbody&gt;. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/content/tables/#striped-rows" target="_blank"> more details.</a></p>

				<table class="table table-striped">
					<thead>
						<tr>
							<th scope="col">#</th>
							<th scope="col">First</th>
							<th scope="col">Last</th>
							<th scope="col">Handle</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td scope="row">1</td>
							<td>Lucia</td>
							<td>Christ</td>
							<td>@Lucia</td>
						</tr>

						<tr>
							<td scope="row">2</td>
							<td>Catrin</td>
							<td>Seidl</td>
							<td>@catrin</td>
						</tr>

						<tr>
							<td scope="row">3</td>
							<td>Lilli</td>
							<td>Kirsh</td>
							<td>@lilli</td>
						</tr>

						<tr>
							<td scope="row">4</td>
							<td>Else</td>
							<td>Voigt</td>
							<td>@voigt</td>
						</tr>

						<tr>
							<td scope="row">5</td>
							<td>Ursel</td>
							<td>Harms</td>
							<td>@ursel</td>
						</tr>

						<tr>
							<td scope="row">6</td>
							<td>Anke</td>
							<td>Sauter</td>
							<td>@Anke</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Bordered Table</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Add <code>.table-bordered</code> for borders on all sides of the table and cells. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/content/tables/#bordered-table" target="_blank"> more details.</a></p>

				<table class="table table-bordered">
					<thead>
						<tr>
							<th scope="col">#</th>
							<th scope="col">First</th>
							<th scope="col">Last</th>
							<th scope="col">Handle</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td scope="row">1</td>
							<td>Lucia</td>
							<td>Christ</td>
							<td>@Lucia</td>
						</tr>

						<tr>
							<td scope="row">2</td>
							<td>Catrin</td>
							<td>Seidl</td>
							<td>@catrin</td>
						</tr>

						<tr>
							<td scope="row">3</td>
							<td>Lilli</td>
							<td>Kirsh</td>
							<td>@lilli</td>
						</tr>

						<tr>
							<td scope="row">4</td>
							<td>Else</td>
							<td>Voigt</td>
							<td>@voigt</td>
						</tr>

						<tr>
							<td scope="row">5</td>
							<td>Ursel</td>
							<td>Harms</td>
							<td>@ursel</td>
						</tr>

						<tr>
							<td scope="row">6</td>
							<td>Anke</td>
							<td>Sauter</td>
							<td>@Anke</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Borderless Table</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Add <code>.table-borderless</code> for borders on all sides of the table and cells. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/content/tables/#borderless-table" target="_blank"> more details.</a></p>

				<table class="table table-borderless">
					<thead>
						<tr>
							<th scope="col">#</th>
							<th scope="col">First</th>
							<th scope="col">Last</th>
							<th scope="col">Handle</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td scope="row">1</td>
							<td>Lucia</td>
							<td>Christ</td>
							<td>@Lucia</td>
						</tr>

						<tr>
							<td scope="row">2</td>
							<td>Catrin</td>
							<td>Seidl</td>
							<td>@catrin</td>
						</tr>

						<tr>
							<td scope="row">3</td>
							<td>Lilli</td>
							<td>Kirsh</td>
							<td>@lilli</td>
						</tr>

						<tr>
							<td scope="row">4</td>
							<td>Else</td>
							<td>Voigt</td>
							<td>@voigt</td>
						</tr>

						<tr>
							<td scope="row">5</td>
							<td>Ursel</td>
							<td>Harms</td>
							<td>@ursel</td>
						</tr>

						<tr>
							<td scope="row">6</td>
							<td>Anke</td>
							<td>Sauter</td>
							<td>@Anke</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Hoverable Rows</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Add <code>.table-hover</code> for borders on all sides of the table and cells. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/content/tables/#hoverable-rows" target="_blank"> more details.</a></p>

				<table class="table table-hover">
					<thead>
						<tr>
							<th scope="col">#</th>
							<th scope="col">First</th>
							<th scope="col">Last</th>
							<th scope="col">Handle</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td scope="row">1</td>
							<td>Lucia</td>
							<td>Christ</td>
							<td>@Lucia</td>
						</tr>

						<tr>
							<td scope="row">2</td>
							<td>Catrin</td>
							<td>Seidl</td>
							<td>@catrin</td>
						</tr>

						<tr>
							<td scope="row">3</td>
							<td>Lilli</td>
							<td>Kirsh</td>
							<td>@lilli</td>
						</tr>

						<tr>
							<td scope="row">4</td>
							<td>Else</td>
							<td>Voigt</td>
							<td>@voigt</td>
						</tr>

						<tr>
							<td scope="row">5</td>
							<td>Ursel</td>
							<td>Harms</td>
							<td>@ursel</td>
						</tr>

						<tr>
							<td scope="row">6</td>
							<td>Anke</td>
							<td>Sauter</td>
							<td>@Anke</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Contextual Table</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Use contextual classes to color table rows or individual cells. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/content/tables/#contextual-classes" target="_blank"> more details.</a></p>
				<table class="table">
					<thead>
						<tr>
							<th scope="col">#</th>
							<th scope="col">First</th>
							<th scope="col">Last</th>
							<th scope="col">Handle</th>
						</tr>
					</thead>

					<tbody>
						<tr class="table-secondary">
							<td scope="row">1</td>
							<td>Lucia</td>
							<td>Christ</td>
							<td>@Lucia</td>
						</tr>

						<tr class="table-primary">
							<td scope="row">2</td>
							<td>Catrin</td>
							<td>Seidl</td>
							<td>@catrin</td>
						</tr>

						<tr class="table-info">
							<td scope="row">3</td>
							<td>Lilli</td>
							<td>Kirsh</td>
							<td>@lilli</td>
						</tr>

						<tr class="table-success">
							<td scope="row">4</td>
							<td>Else</td>
							<td>Voigt</td>
							<td>@voigt</td>
						</tr>

						<tr class="table-danger">
							<td scope="row">5</td>
							<td>Ursel</td>
							<td>Harms</td>
							<td>@ursel</td>
						</tr>

						<tr class="table-warning">
							<td scope="row">6</td>
							<td>Anke</td>
							<td>Sauter</td>
							<td>@Anke</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Dark Table</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> You can also invert the colors—with light text on dark backgrounds—with <code>.table-dark</code>. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/content/tables/#examples" target="_blank"> more details.</a></p>

				<table class="table table-dark">
					<thead>
						<tr>
							<th scope="col">#</th>
							<th scope="col">First</th>
							<th scope="col">Last</th>
							<th scope="col">Handle</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td scope="row">1</td>
							<td>Lucia</td>
							<td>Christ</td>
							<td>@Lucia</td>
						</tr>

						<tr>
							<td scope="row">2</td>
							<td>Catrin</td>
							<td>Seidl</td>
							<td>@catrin</td>
						</tr>

						<tr>
							<td scope="row">3</td>
							<td>Lilli</td>
							<td>Kirsh</td>
							<td>@lilli</td>
						</tr>

						<tr>
							<td scope="row">4</td>
							<td>Else</td>
							<td>Voigt</td>
							<td>@voigt</td>
						</tr>

						<tr>
							<td scope="row">5</td>
							<td>Ursel</td>
							<td>Harms</td>
							<td>@ursel</td>
						</tr>

						<tr>
							<td scope="row">6</td>
							<td>Anke</td>
							<td>Sauter</td>
							<td>@Anke</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Table head options</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Similar to tables and dark tables, use the modifier classes <code>.thead-dark</code> or <code>.thead-light</code> to make &lt;thead&gt;s appear light or dark gray. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/content/tables/#table-head-options" target="_blank"> more details.</a></p>

				<table class="table">
					<thead class="thead-dark">
						<tr>
							<th scope="col">#</th>
							<th scope="col">First</th>
							<th scope="col">Last</th>
							<th scope="col">Handle</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td scope="row">1</td>
							<td>Lucia</td>
							<td>Christ</td>
							<td>@Lucia</td>
						</tr>

						<tr>
							<td scope="row">2</td>
							<td>Catrin</td>
							<td>Seidl</td>
							<td>@catrin</td>
						</tr>
					</tbody>
				</table>

				<table class="table">
					<thead class="thead-light">
						<tr>
							<th scope="col">#</th>
							<th scope="col">First</th>
							<th scope="col">Last</th>
							<th scope="col">Handle</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td scope="row">1</td>
							<td>Lucia</td>
							<td>Christ</td>
							<td>@Lucia</td>
						</tr>

						<tr>
							<td scope="row">2</td>
							<td>Catrin</td>
							<td>Seidl</td>
							<td>@catrin</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-12">
		@@include('recent-order-table.htm')
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "<script src='assets/plugins/daterangepicker/moment.min.js'></script>",
	"date_range_picker": "<script src='assets/plugins/daterangepicker/daterangepicker.js'></script>",
	"date_range_js": "<script src='assets/js/date-range.js'></script>",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
